<template>
	<view class="search flexR">
		<view class="search-main flexR">
			<u-icon class="search-main-icon" name="search" @click="handleSearch"></u-icon>
			<view class="search-main-input">
				<u-input v-model="value" :placeholder="placeholder" trim :clearable="false" @confirm="handleSearch" />
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			real: {
				type: Boolean,
				default: true
			},
			placeholder: {
				type: String,
				default: '请输入内容'
			}
		},
		data() {
			return {
				value: ''
			}
		},
		watch: {
			value(val) {
				if (val) {
					if (this.real) {
						this.$emit('search', val)
					}
				} else {
					this.$emit('search', val)
				}
			},
		},
		onLoad() {

		},
		methods: {
			handleSearch() {
				this.$emit('search', this.value)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		height: 50px;
		line-height: 50px;
		justify-content: center;
		align-items: center;
		width: 100%;

		.search-main {
			padding: 0 30rpx;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			background-color: #F6F6F6;
			border-radius: 50rpx;

			.search-main-icon {
				height: 44rpx;
				width: 44rpx;
				font-size: 44rpx;
				color: $text-color-card-title;
				margin-right: 12rpx;
			}

			.search-main-input {
				flex: 1;
				margin-right: 10rpx;
				font-size: 28rpx;
			}
		}
	}
</style>